<template>
  <div>
  <h2>房型添加页面</h2>
  <hr>
<table border="1">
  <tr>
    <td>房型名称:</td>
    <td>
      <input type="text">
    </td>
  </tr>
  <tr>
    <td>房型图片:</td>
    <td>
      <input type="file" @change="TP">
      <img :src="src" alt="">
    </td>
  </tr>
</table>
  </div>
</template>

<script setup lang="ts">
import { reactive,toRefs,onMounted} from 'vue';
import{useRouter,useRoute} from 'vue-router';
import axios from 'axios';

const router=useRouter();
const route=useRoute();

let data:any=reactive({
  src:''
})
let {src}=toRefs(data);

function TP(e:any){
  var FD=new FormData();
  var file=e.target.files[0];
  FD.append("file",file);
  axios({
    url:'https://localhost:7135/api/FangXing/TP',
    method:'post',
    data:FD
  })
  .then(res=>{
    console.log(res)
    if(res.data.data!="图片上传失败")
  {
    alert('上传成功')
    src.value=res.data.data
  }
  })
  .catch(err=>{
    console.log(err)
  })
  

}

</script>

<style scoped>

</style>